<template>
  <n-card class="creator-card" :bordered="true" size="small">
    <template #header>
      <div class="section-header">
        <n-space align="center" :size="8">
          <n-icon :size="20" color="#67c23a">
            <PeopleOutline />
          </n-icon>
          <n-text strong>推荐创作者</n-text>
        </n-space>
        <n-button text size="small" @click="goToCreators">
          查看更多
          <template #icon>
            <n-icon><ArrowForwardOutline /></n-icon>
          </template>
        </n-button>
      </div>
    </template>

    <!-- 加载状态 -->
    <div v-if="loading" class="creator-loading">
      <loading-skeleton type="card" :count="3" />
    </div>

    <!-- 创作者列表 -->
    <div v-else-if="creators.length > 0" class="creator-list">
      <div
        v-for="creator in creators"
        :key="creator.id"
        class="creator-item"
        @click="handleCreatorClick(creator.id)"
      >
        <!-- 头像 -->
        <div class="creator-avatar">
          <n-avatar
            :size="40"
            round
            color="transparent"
          >
            <img 
              :src="creator.avatar" 
              :alt="creator.nickname"
              class="creator-avatar-img"
              @error="handleAvatarError"
            />
            <template #fallback>
              <div class="creator-avatar-fallback">
                {{ creator.nickname.charAt(0) }}
              </div>
            </template>
          </n-avatar>
          
          <!-- 推荐标识 -->
          <div v-if="creator.is_recommend === 1" class="creator-recommend-badge">
            <n-icon :size="12">
              <StarOutline />
            </n-icon>
          </div>
        </div>

        <!-- 创作者信息 -->
        <div class="creator-info">
          <div class="creator-name">{{ creator.nickname }}</div>
          <div class="creator-meta">
            <n-tag :type="getCreatorTypeTagType(creator.creator_type)" size="small">
              {{ getCreatorTypeText(creator.creator_type) }}
            </n-tag>
            <span class="creator-platform">{{ creator.platform }}</span>
          </div>
          <div class="creator-stats">
            <span class="creator-followers">
              <n-icon :size="12"><PeopleOutline /></n-icon>
              {{ formatNumber(creator.followers) }}
            </span>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="creator-actions">
          <n-button size="tiny" type="primary" ghost @click.stop="handleCreatorClick(creator.id)">
            查看
          </n-button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <n-empty v-else description="暂无推荐创作者" size="small" />
  </n-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import { 
  PeopleOutline, 
  ArrowForwardOutline,
  StarOutline
} from '@vicons/ionicons5'
import { getCreatorRecommend } from '@/api/creators'
import type { CreatorDetail as CreatorDetailType } from '@/types/creators'
import { CREATOR_TYPES } from '@/api/creators'
import LoadingSkeleton from '@/components/common/LoadingSkeleton.vue'

const router = useRouter()
const message = useMessage()

// 状态
const loading = ref(false)
const creators = ref<CreatorDetailType[]>([])

// 获取推荐创作者
const fetchRecommendCreators = async () => {
  try {
    loading.value = true
    const response = await getCreatorRecommend(4) // 获取4个推荐创作者
    
    if (response.code === 1) {
      creators.value = (response.data as unknown as CreatorDetailType[]) || []
    } else {
      console.error('获取推荐创作者失败:', response.msg)
    }
  } catch (error: any) {
    console.error('获取推荐创作者失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取创作者类型文本
const getCreatorTypeText = (type: number) => {
  return CREATOR_TYPES[type as keyof typeof CREATOR_TYPES]?.label || '未知类型'
}

// 获取创作者类型标签类型
const getCreatorTypeTagType = (type: number) => {
  switch (type) {
    case 1: return 'error'
    case 2: return 'info'
    case 3: return 'success'
    default: return 'default'
  }
}

// 格式化数字
const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

// 处理头像加载错误
const handleAvatarError = () => {
  console.log('创作者头像加载失败，使用默认头像')
}

// 处理创作者点击
const handleCreatorClick = (creatorId: number) => {
  router.push(`/creators?detail=${creatorId}`)
}

// 跳转到创作者页面
const goToCreators = () => {
  router.push('/creators')
}

// 组件挂载时获取数据
onMounted(() => {
  fetchRecommendCreators()
})
</script>

<style scoped>
.creator-card {
  height: 100%;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.creator-loading {
  min-height: 200px;
}

.creator-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creator-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.creator-item:hover {
  background-color: var(--n-color-hover);
}

.creator-avatar {
  position: relative;
  flex-shrink: 0;
}

.creator-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.creator-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--n-color-primary);
  color: white;
  font-weight: 600;
  font-size: 14px;
  border-radius: 50%;
}

.creator-recommend-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--n-color-warning);
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.creator-info {
  flex: 1;
  min-width: 0;
}

.creator-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--n-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}

.creator-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.creator-platform {
  font-size: 12px;
  color: var(--n-text-color-2);
}

.creator-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creator-followers {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--n-text-color-2);
}

.creator-actions {
  flex-shrink: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .creator-item {
    padding: 6px;
    gap: 8px;
  }

  .creator-name {
    font-size: 13px;
  }

  .creator-meta {
    gap: 6px;
  }
}
</style>
